import { Button } from "@renderer/components/ui/base/button";
import { Label } from "@renderer/components/ui/base/field";
import { Download } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

export function DataExport() {
  const { t } = useTranslation("translation", {
    keyPrefix: "settings.data-settings",
  });
  const [isExporting, setIsExporting] = useState(false);

  const handleExport = async () => {
    try {
      setIsExporting(true);
      const result =
        await window.service.databaseBackupService.exportDatabase();

      if (result.success) {
        toast.success(result.message);
      } else {
        toast.error(result.message);
      }
    } catch {
      toast.error(t("export.error"));
    } finally {
      setIsExporting(false);
    }
  };

  return (
    <div className="flex flex-col gap-2">
      <Label className="text-label-fg">{t("export.title")}</Label>

      <div className="flex items-center justify-between gap-x-10 rounded-[10px] bg-setting px-3.5 py-1.5">
        <div className="flex flex-row gap-1.5 text-sm">
          <span className="text-setting-fg">{t("export.description")}</span>
        </div>
        <Button
          className="h-8 rounded-lg"
          onPress={handleExport}
          isPending={isExporting}
        >
          <div className="flex items-center gap-1.5">
            <Download className="h-4 w-4" />
            <span>
              {isExporting ? t("export.exporting") : t("export.button")}
            </span>
          </div>
        </Button>
      </div>
    </div>
  );
}
